<template>
  <div class="list">
    <header>分类</header>
    <section>
      <!-- 左 -->
      <div class="list-l">
        <van-sidebar
          v-model="activeKey"
          class="l-item"
          ref="ulList"
          @change="onChange"
        >
          <van-cell v-for="item in data" :key="item.cat_id">
            <div class="biaoti">—-{{ item.cat_name }}-—</div>
            <van-sidebar-item
              v-for="item1 in item.lv2"
              :key="item1.cat_id"
              :title="item1.cat_name"
              ref="left"
            />
          </van-cell>
        </van-sidebar>
      </div>
      <!-- 右 -->
      <div class="list-r" ref="right">
        <ul>
          <!-- 每一大模块 -->
          <li class="shop-list" v-for="item in data" :key="item.cat_id">
            <div v-if="item.cat_adver">
              <img :src="item.cat_adver" alt="" />
            </div>
            <template v-for="(item1, index) in item.lv2">
              <!--  子分类 -->
              <h2 :key="item1.cat_id" ref="cate">{{ item1.cat_name }}</h2>
              <!-- 每一块的信息展示 -->
              <!-- 一条数据 -->
              <ul :key="index" class="r-content">
                <li v-for="(item2, index) in item1.adver_list" :key="index">
                  <img :src="item2.link" alt="" />
                  <span>{{ item2.linkinfo }}</span>
                </li>
              </ul>
            </template>
          </li>
        </ul>
      </div>
    </section>
    <!-- <footer>底部</footer> -->
  </div>
</template>

<script>
import Vue from "vue";
import { Sidebar, SidebarItem, Cell } from "vant";

Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Cell);
// import axios from "axios";
export default {
  data() {
    return {
      data: [],
      activeKey: 0,
    };
  },
  created() {},
  methods: {
    onChange(e) {
      // console.log(e);
      // console.log(this.activeKey);
      this.activeKey = e;
      // console.log(this.$refs);
      let scrollYTo =
        this.$refs.cate[e].offsetTop - this.$refs.cate[e].offsetHeight;
      // console.log(scrollYTo-200);
      this.$refs.right.scrollTo(0, scrollYTo);
    },
  },
  mounted() {
    const url =
      // "api/topapi?method=category.itemCategory&format=json&v=v1&sign=57F932B4631BCB1CFED542418F0E2C39";
      "http://localhost:4399/data";
    this.$http.get(url).then((res) => {
      console.log(res.data);
      this.data = res.data.categorys;
      // console.log(this.data);
    });
    // 子组件渲染完毕;
    this.$nextTick(() => {
      this.$refs.right.addEventListener("scroll", (e) => {
        let current = Math.floor(this.$refs.right.scrollTop / 580);
        console.log(current);
        document
          .querySelectorAll(".van-sidebar-item")
          .forEach((item, index) => {
            if (current === index) {
              item.className = "van-sidebar-item van-sidebar-item--select";
            } else {
              item.className = "van-sidebar-item";
            }
          });
        if (current >= 8) {
          console.log("左侧随右侧滚动");
          // console.log(this.$refs.leftTop.clientHeight+600);
          document.querySelector(".l-item").scrollTo(0, 10000);
          // console.log(this.$refs.ulList.scrollTo(0,100000));
        } else {
          document.querySelector(".l-item").scrollTo(0, 0);
        }
        this.activeKey = Math.floor(this.$refs.right.scrollTop / 580);
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  header {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    text-align: center;
    /* background-color: pink; */
  }
  section {
    display: flex;
    flex: 1;
    overflow: auto;
    .list-l {
      width: 150px;
      height: 100%;
      border: 2px solid #f7f7f7;
      display: flex;
      flex-direction: column;
      overflow: auto;
      /*  .l-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* .van-sidebar-item--select {
          width: 100%;
          line-height: 55px;
          text-align: center;
          &.active {
            border-left: 3px solid #b54f4a;
          }
        } */
    }
  }
  .van-sidebar {
    width: 100px;
  }
  .list-r {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #f7f7f7;
    .shop-list {
      text-align: center;
      div {
        display: flex;
        justify-content: center;
        height: 79px;
        margin-top: 15px;

        img {
          display: block;
          width: 90%;
          height: 100%;
          border-radius: 10px;
        }
      }
      h2 {
        height: 54px;
        line-height: 54px;
        font-size: 15px;
        font-weight: normal;
        /* background-color: skyblue; */
      }
      .r-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 13px;
        /* background-color: rgb(116, 227, 116); */
        background-color: #ffffff;
        border-radius: 10px;
        font-size: 12px;
        padding-bottom: 15px;

        /* 每一小块 */
        img {
          width: 100%;
        }
        span {
          display: block;
          /* height: 25px; */
          /* line-height: 25px; */
        }
        li {
          width: 45%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
/* } */
.van-sidebar-item--select {
  color: red;
  font-size: 13px;
}
.van-sidebar-item {
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding: 20px 5px;
}

.van-cell {
  padding: 0;
}
/* ::v-deep .item.cat_name{
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding: 20px 5px;
} */
.van-cell__value--alone {
  text-align: center;
}
/* .van-cell__value {
  .item.cat_name {
    width: 100%;
    text-align: center;
    font-size: 13px;
    padding: 20px 5px;
  }
} */
.biaoti {
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding: 20px 5px;
  color: #a9a9a9;
}
footer {
  height: 55px;
  line-height: 55px;
  text-align: center;
  background-color: pink;
}
</style>
